import { Button } from "antd";
import { useState } from "react";
import { useImmer } from "use-immer";

export default function PractiseFirst() {
  //   let a = "zhangsan";
  const [a, setA] = useState("zhangsan");
  //  let count  = 0
  //  count++;
  // count = count+1;
  const [count, setCount] = useState(10);
  const [qc, setQc] = useState({
    labelLike: "a",
    pageNum: 1,
    pageSize: 11,
  });
  const [queryCn, setQueryCn] = useImmer({
    labelLike: "b",
    pageNum: 1,
    pageSize: 11,
  });
  const changeQc = () => {
    // qc.pageNum++;
    // setQc({
    //   labelLike: qc.labelLike,
    //   pageSize: qc.pageSize,
    //   pageNum: qc.pageNum + 1,
    // });
    setQc({
      ...qc,
      pageNum: qc.pageNum + 1,
    });
  };
  const changeQueryCn = () => {
    setQueryCn((qc) => {
      qc.pageNum++;
    });
  };
  const b = <h2>go</h2>;
  const c = [
    { name: "zhangsan", age: 11 },
    { name: "lisi", age: 12 },
  ];
  const cc = [
    { value: "zhangsan", text: "张三", color: "primary" },
    { value: "lisi", text: "李四", color: "link" },
  ];
  const convert = (name: string) => {
    const r = cc.find((e) => e.value === name);
    if (!r) return <div></div>;

    return (
      <>
        <Button type={r.color as any}>{r.text}</Button>
      </>
    );
  };
  const d = false;
  const m1 = () => {
    // a = a + "y";
    setA(a + "y");
    console.log(a);
  };
  const m2 = () => {
    // count++;
    setCount(count + 1);
  };
  return (
    <>
      <br />
      <button onClick={m1}>I'm a button 1 </button>
      <Button type="primary" onClick={m2}>
        {count}
      </Button>
      <div>{a + "xxx"}</div>
      <div>{b}</div>
      <div>
        jsx tsx 模板中没有v-for foreach 之类的标签或指令,使用js原生map操作
      </div>
      <ul>
        {c.map((e, i) => (
          <li key={i}>
            <span>{e.name}</span> ====== <span>{convert(e.name)}</span> ======{" "}
            <span>{e.age}</span>
          </li>
        ))}
      </ul>
      {d && <div>go</div>}
      <span>{JSON.stringify(qc)}</span>
      <Button onClick={changeQc}>change Qc</Button>
      <span>{JSON.stringify(queryCn)}</span>
      <Button onClick={changeQueryCn}>change queryCn</Button>
    </>
  );
}
